<template>
    <div class="hngkTitle">
        <div class="titleWord">
            <div class="titleWord1">
                <div class="upContent1">
                    <div class="upWord1" @click="ziran()">自然灾害</div>
                </div>
                <div class="downContent1">natural disaster</div>
            </div>
            <div class="upContent">
                <div class="upWord">安全生产</div>
                <div class="upBtns">
                    <div @click="changeKs">
                        <!-- @click="changeKs" -->
                        <img
                            :class="{ active: !opacityState }"
                            src="/data/images/hngk/xia.png"
                            alt=""
                        />
                    </div>
                    <div @click="changeHy">
                        <!-- @click="changeHy" -->
                        <img
                            :class="{ active: opacityState }"
                            src="/data/images/hngk/shang.png"
                            alt=""
                        />
                    </div>
                </div>
            </div>
            <div class="downContent">safeProduce</div>
        </div>
    </div>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    inject,
} from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";

export default {
    setup() {
        const store = useStore();
        const opacityState = ref(false);
        function changeKs() {
            store.commit("changeJcyjComponent", "Hy");
            opacityState.value = false;
        }
        function changeHy() {
            store.commit("changeJcyjComponent", "Ks");
            opacityState.value = true;
        }
        function ziran() {
            // ElMessage.warning({
            //     message: '外部链接，提供方暂未提供',
            //     type: 'warning'
            // });
            let url = "https://hn.yjzh.org.cn:7003/dss-hnyjt-pro/";
            window.open(url, "_blank");
        }
        onMounted(() => {});
        return {
            changeKs,
            changeHy,
            ziran,
            opacityState,
        };
    },
};
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .hngkTitle {
        position: absolute;
        left: vw(462);
        top: vh(128);
        width: vw(162);
        cursor: pointer;
        z-index: 3;

        .titleWord {
            .upContent {
                display: flex;

                .upWord {
                    font-size: vw(20);
                    color: #00E5FD;
                }

                .upBtns {
                    margin-left: vw(32);
                    margin-top: vw(2);
                    height: vh(45);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        img {
                            width: vw(16);
                            height: vw(15);
                            cursor: pointer;
                        }

                        .active {
                            opacity: 0.3;
                        }
                    }
                }
            }

            .downContent {
                font-size: vw(18);
                font-style: oblique;
                color: #00E5FD;
                margin-top: vh(-20);
            }
        }

        .titleWord1 {
            margin-bottom: vh(20);

            .upContent1 {
                display: flex;

                .upWord1 {
                    font-size: vw(20);
                    text-decoration: underline;
                }

                .upBtns1 {
                    margin-left: vw(16);
                    margin-top: vw(5);
                    height: vh(45);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        img {
                            width: vw(16);
                            height: vw(15);
                            cursor: pointer;
                        }
                    }
                }
            }

            .downContent1 {
                font-size: vw(18);
                font-style: oblique;
                margin-top: vh(5);
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .hngkTitle {
        position: absolute;
        left: vw1(1080);
        top: vh(128);
        width: vw1(162);
        cursor: pointer;
        z-index: 3;

        .titleWord {
            .upContent {
                display: flex;

                .upWord {
                    font-size: vw1(20);
                    color: #00E5FD;
                }

                .upBtns {
                    margin-left: vw1(32);
                    margin-top: vw1(2);
                    height: vh(45);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        img {
                            width: vw1(16);
                            height: vh(15);
                            cursor: pointer;
                        }

                        .active {
                            opacity: 0.3;
                        }
                    }
                }
            }

            .downContent {
                font-size: vw1(18);
                font-style: oblique;
                color: #00E5FD;
                margin-top: vh(-20);
            }
        }

        .titleWord1 {
            margin-bottom: vh(20);

            .upContent1 {
                display: flex;

                .upWord1 {
                    font-size: vw1(20);
                    text-decoration: underline;
                }

                .upBtns1 {
                    margin-left: vw1(16);
                    margin-top: vh(5);
                    height: vh(45);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        img {
                            width: vw1(16);
                            height: vh(15);
                            cursor: pointer;
                        }
                    }
                }
            }

            .downContent1 {
                font-size: vw1(18);
                font-style: oblique;
                margin-top: vh(5);
            }
        }
    }
}
</style>